import React, { PropTypes } from 'react';
import {Button,Tabs,Input,Card,Search} from 'antd';

const Material = ({tabs,selectTab,appMsgList}) => {

	const {TabPane} = Tabs;

	let TabPanes = tabs.map(({tab,key})=> {<TabPane tab={tab} key={key}></TabPane>})
	return

	<div>
		<Tabs defaultActiveKey='1' onChange={selectTab}>
			{TabPanes}
		</Tabs>
		<AppMsg appMsgList={appMsgLIst} />
	</div>
}

const AppMsg = ({appMsgList}) => {

	const {Search} = Input.Search;
	let appmsgList = appMsgList.map(({items,date,id}) => {<AppMsgUnit id={id} date={date} items={items}/>})
	return
	<div className="appmsg_container">
		<Search placeholder="标题／作者／摘要" />
		<div className="appmsg_list">
			<div className="sub_title_bar">
				图文消息（共{num}条）
			</div>
			<div className="appmsg_list_body">
				{appmsgList}
			</div>
		</div>
	</div>
}

const AppMsgUnit = ({items,id,date}) => {

	let appmsgItems = items.map(({title,imgUrl},index)=>{
		if (!index) {
			return <CoverAppMsgItem title={title} index={index} imgUrl={imgUrl} />
		}
		else {
				<AppMsgItem index={index} title={title}/>
		}
	})
	return
	<div id={id} className="appmsg_unit">
		<Card title={date} style={{ width: 300 }}>
			{appmsgItems}
		</Card>
		<div className="appmsg_opr">
			<Button />
			<Button />
		</div>
	</div>

}

const CoverAppMsgItem = ({title,index,imgUrl})=>{
	return
	<div className="cover_appmsg">
		<h4 className="appmsg_title">
			{title}
		</h4>
		<div className="appmsg_thumb_wrp" style=`background-image:url({imgUrl})`></div>
	</div>
}

const AppMsgItem = ({title,index.imgUrl})=> {
	return
	<div className="appmsg_item">
		<h4 className="appmsg_title">
			{title}
		</h4>
		<div className="appmsg_thumb_wrp" style=`background-image:url({imgUrl})`></div>
	</div>
}

export default Material;
